<template>
  <el-container>
    <el-row>
      <el-col :span="24">
        <h1>发布文章</h1>
        <!-- 标题 -->
        <el-row :gutter="3">
          <el-col :span="12">
            <el-input
              ref="input_title"
              v-model="title"
              placeholder="请输入文章标题"
              clearable
            ></el-input>
          </el-col>
        </el-row>
        <!-- 分类 -->
        <el-row>
          <el-col>
            <el-select
              v-model="check_category"
              placeholder="请选择文章分类"
              size="medium"
              :filterable="true"
              style="width: 50%"
              @change="check_info"
            >
              <el-option
                v-for="item in options"
                :key="item._id"
                :label="item.categoryName"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- 文章标签 -->
        <el-row :gutter="3">
          <el-col :span="12">
            <el-input
              v-model="tags"
              placeholder="请输入文章标签 多个标签用空格分隔 最多三个，超出部分无效"
              clearable
            ></el-input>
          </el-col>
        </el-row>
        <!-- 文章封面  这个功能暂时停用-->
        <!-- <el-row>
          <el-upload
            class="upload-demo"
            action="/api/manage/img/upload"
            accept="image/jpeg, image/png, image/jpg"
            name="image"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            :limit="1"
            style="width: 50%"
          >
            <el-button size="small" type="primary">上传文章封面图</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-row> -->
        <!-- 摘要 -->
        <el-row>
          <el-col :span="12">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入文章摘要"
              v-model="info"
            >
            </el-input>
          </el-col>
        </el-row>
        <!-- 输入 -->
        <el-row :gutter="3">
          <el-col>
            <div id="editor">
              <mavon-editor
                :ishljs="true"
                style="height: 100%"
                v-model="context"
                @imgAdd="$imgAdd"
                @change="change"
              ></mavon-editor>
            </div>
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <el-row :gutter="3">
          <el-col>
            <el-button type="success" @click="PublishButton"
              >文章发布</el-button
            >
            <el-button type="primary">保存草稿</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import {
  ReqPublicPassage,
  ReqPassageAllContext,
  ReqGetCategoryName,
  ReqUpdatePassage,
} from "../../api/index";

export default {
  name: "pulishNav",
  mounted() {
    //获取焦点，默认是最上面
    this.$refs["input_title"].focus();
    //判断当前的vuex提供的选项卡数据是否存在，这里存在一个问题，就是如果后台数据本来就没有，这里会一直反复执行
    if (!this.options.length) {
      //发送请求获取数据
      this.GetCategory();
    }
  },
  data() {
    return {
      articleId: "", //文章的id
      flag: 0, // 标识是发布文章还是修改文章 0是发布 1是修改
      context: "", // 文章内容
      title: "", // 文章标题
      info: "", //文章摘要
      tags: "", // 文章标签
      //options: [], //文章的分类 这里使用vuex进行状态管理，该状态废除
      check_category: "", //当前选中的分类名称
      check_category_id: "", //选中分类的id，

      OssUrl: "", // 图片上传aliyun返回的url
      html: "", // markdown解析成html
      fileList: [
        {
          name: "demo.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  computed: {
    options: {
      get() {
        return this.$store.state.category;
      },
      set() {},
    },
  },
  // 如果是修改文章这里会接收到参数
  created() {
    //如果接收到路由传参说明就是修改文章，反之就是写文章
    if (this.$route.query.articleId) {
      // 是修改文章
      this.flag = 1;
      // 发送请求获取文章
      // console.log(this.$route.query.articleId);
      ReqPassageAllContext(this.$route.query.articleId).then((res) => {
        if (res.code === 0) {
          // 请求成功更新数据
          this.context = res.data.context;
          this.info = res.data.info;
          this.title = res.data.title;
          this.tags = res.data.tags.join(" ");
          this.articleId = res.data._id;
          //判断当前的文章是否含有分类ID
          if (res.data.categoryID) {
            // 如果有就发送请求获取
            console.log("当前文章的分类id", res.data.categoryID);
            this.check_category_id = res.data.categoryID;
            ReqGetCategoryName(res.data.categoryID).then((res) => {
              if (res.code === 0) {
                console.log("获取到的分类名称", res.data);
                this.check_category = res.data;
              }
            });
          } else {
            console.log("当前的文章没有所属分类");
          }
          // this.check_category_id =
        }
      });
    } else {
      console.log("当前是发布新的文章");
    }
  },
  methods: {
    //如果当前的vuex中没有数据需要发请求获取数据
    ...mapActions(["GetCategory"]),
    // 切换选择项
    check_info(_id) {
      this.check_category_id = _id;
    },
    // 发布文章
    PublishButton() {
      //前端验证
      let [title, info, context, categoryID, tags, flag] = [
        this.title,
        this.info,
        this.context,
        this.check_category_id,
        this.tags,
        this.flag,
      ];
      console.log(context);
      if (title && info && context && categoryID && tags) {
        console.log("执行了");
        // 只取前三个
        tags = tags.split(" ").slice(0, 3);
        if (!flag) {
          // 标识是0 发布文章
          ReqPublicPassage({ title, info, context, categoryID, tags }).then(
            (res) => {
              if (res.code === 0) {
                this.$message({
                  message: "文章发布成功",
                  type: "success",
                });
                // 发布成功之后跳转到文章管理界面
                this.$router.replace({
                  path: "/admin/article",
                  query: {
                    pageindex:'max',
                  },
                });
                //this.$router.replace("/admin/article");
              } else {
                this.$message({
                  message: "文章发布失败",
                  type: "danger",
                });
              }
            }
          );
        } else {
          // 标识为1 修改文章
          ReqUpdatePassage({
            _id: this.articleId,
            title,
            info,
            context,
            categoryID,
            tags,
          }).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: "文章修改成功",
                type: "success",
              });
              // 跳转文章管理界面
              this.$router.replace("/admin/article");
            } else {
              this.$message({
                message: "文章修改失败",
                type: "warning",
              });
            }
          });
        }
      } else {
        alert("请补全表单内容");
      }
    },

    // 下面功能还未实现功能
    // 保存文章
    /*  PublishSave() {
      if (this.md && this.title && this.category) {
        // 获取文章之后的处理逻辑
        this.$axios
          .post(
            "/api/v1/article/create",
            // 构造请求参数form-data
            qs.stringify({
              title: this.title,
              category: this.category,
              ossUrl: this.OssUrl,
              html: this.html,
              tags: this.tags,
              status: false,
              md: this.md,
            })
          )
          .then(function (response) {
            alert("文章保存为草稿！");
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        alert("文章内容不能不空！");
      }
    }, */
    // 删除封面图触发的函数
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    // 点击封面图触发的函数
    handlePreview(file) {
      // console.log(file);
    },

    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("upload", $file);
      this.$axios({
        url: "http://127.0.0.1:8081/api/v1/upload",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
      }).then((data) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
        // console.log(data)
        // 将后端返回的url替换到文本原位置
        this.$refs.md.$img2Url(pos, data.data.imgurl);
        // $vm.$img2Url(pos, url);
      });
    },
    // 所有操作都会被解析重新渲染
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render;
    },
    // 文件上传触发的函数   自定义请求:http-request="uploadSectionFile"
    uploadSectionFile(param) {
      var fileObj = param.file; // 要上传的文件对象
      var formData = new FormData();
      formData.append("upload", fileObj); // 传文件
      // console.log(fileObj);
      // form.append('id',this.srid)          // 传其它参数文件
      this.$axios({
        url: "http://127.0.0.1:8081/api/v1/upload",
        method: "post",
        data: formData,
        headers: { "Content-Type": "multipart/form-data" },
      })
        .then((res) => {
          // 图片上传到阿里云oss  后端返回的图片地址
          this.OssUrl = res.data.imgurl;
          alert("上传成功");
        })
        .catch((err) => {
          console.log(err);
          alert("上传失败");
        });
    },
  },
};
</script>

<style scoped>
#editor {
  margin: auto;
  width: 100%;
  height: 700px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
